<template>
  <div>
    <ul class="menu">
      <li>
        <router-link to="/" activeClass="active" exact
          ><i class="iconfont icon-ai-home"></i>首页</router-link
        >
      </li>
      <li>
        <router-link to="/classify" activeClass="active" exact
          ><i class="iconfont icon-fenlei"></i>分类</router-link
        >
      </li>
      <li>
        <router-link to="/study" activeClass="active" exact
          ><i class="iconfont icon-shuji"></i>我的学习</router-link
        >
      </li>
      <li>
        <router-link to="/my" activeClass="active" exact
          ><i class="iconfont icon-wode2"></i>账号</router-link
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.menu {
  height: 1.12rem;
  background-color:#f8f8f8;
  display: flex;
}
.menu li {
  flex: 1;
  text-align: center;
}
.menu li a {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.26rem;
  color: #a6a6a6;
}
.menu li i{
  font-size: 0.48rem;
}
.active{
  color: #3c4a54 !important;
}
</style>
